<template>
  <div class="no-data" v-show="show">
    <div class="no-data-title"><slot></slot></div>
    <div class="no-data-body">
      <img v-if="!props.hideImg" src="@/assets/nodata.png" alt="" />
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  hideImg?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  hideImg: false,
});
const show = ref<boolean>(false);
setTimeout(() => {
  show.value = true;
}, 1000);
</script>

<style lang="scss" scoped>
$title-color: #dae8fd;
.no-data {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-size: 0.96rem;
  font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif;
  &-title {
    color: $title-color;
    font-weight: bold;
    text-align: left;
  }
  &-body {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 8rem;
      margin-bottom: 1.2rem;
    }
    span {
      color: #b7cbff;
    }
  }
}
</style>
